{% extends 'layouts/base.html' %}
{% load static i18n %}

{% block title %}{% trans "Detalhe da Solicitação" %}{% endblock title %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/solicitation.css' %}">
{% endblock extrastyle %}

{% block page_title %}{% trans "Solicitação" %}{% endblock page_title %}

{% block breadcrumbs %}
  <li class="breadcrumb-item"><a href="#">{% trans "Solicitação" %}</a></li>
  <li class="breadcrumb-item active" aria-current="page">{% trans "Detalhes" %}</li>
{% endblock breadcrumbs %}

{% block content %}
<div class="container">
    <h1 class="mt-4">{% trans "Detalhe da Solicitação" %}</h1>
    
    <div class="row mt-4">
        <!-- Detalhes da Solicitação -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>{% trans "Solicitação" %}</h5>
                </div>
                <div class="card-body">
                    <p><strong>{% trans "Protocolo:" %}</strong> {{ solicitation.protocol }}</p>
                    <p><strong>{% trans "Status:" %}</strong> {{ solicitation.status }}</p>
                    <p><strong>{% trans "Data da Solicitação:" %}</strong> {{ solicitation.created_at|date:"d/m/Y" }}</p>
                </div>
            </div>
        </div>

        <!-- Participantes -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>{% trans "Participantes" %}</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        {% for participant in participants %}
                            <li class="list-group-item">
                                {{ participant.user.username | upper }} - {{ participant.user.email }}
                            </li>
                        {% empty %}
                            <li class="list-group-item">{% trans "Nenhum participante cadastrado." %}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Botão de Chat -->
    <div class="row mt-4">
        <div class="col-md-12 text-center">
            <a href="{% url 'administrator:chat_room' solicitation.protocol %}" class="btn btn-primary">{% trans "Ir para o Chat" %}</a>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<!-- Código JS adicional aqui, se necessário -->
{% endblock extra_js %}
